<template>
	<div class="resetPassword login">
		<el-form :mode='user' label-position="right">
			<el-form-item>
				<span>方<i class='marginTwo'></i>式</span>
				<el-select v-model="user.type" placeholder="通过邮箱或者手机号" @change='clearText'>
					<el-option label="邮箱" value="email"></el-option>
					<el-option label="手机号" value="phone"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<span v-show='user.type=="phone"'>手<i class='marginHalf'></i>机<i class='marginHalf'></i>号</span>
				<span v-show='user.type=="email"'>邮<i class='marginTwo'></i>箱</span>
				<el-input  v-model="user.contact" :maxlength='user.type=="phone"?11:50' show-word-limit class='text'></el-input>
			</el-form-item>
			<el-form-item >
				<span>验<i class='marginHalf'></i>证<i class='marginHalf'></i>码</span>
				<div class='codeBox'>
					<el-input v-model="user.code" maxlength=6 autocomplete="off" class='text'></el-input>
					<el-button type="primary" plain  :loading="loading" :disabled='disabledSendCode' @click='sendCodeBy' class='sendCodeBtn'>
						<span v-show='countDown'>
							{{countDown+'秒后'}}
						</span>
						发送验证码
					</el-button>
				</div>
			</el-form-item>
			<el-form-item>
				<span>新<i class='marginHalf'></i>密<i class='marginHalf'></i>码</span>
				<el-input type="password" show-password v-model="user.password" class='text'></el-input>
			</el-form-item>	
			<el-form-item>
				<span>确认密码</span>
				<el-input type="password" show-password v-model="user.checkPassword" class='text'></el-input>
			</el-form-item>
		</el-form>
		<div class='bottom'>
			<el-button type="primary" @click="resetPassword"  :disabled='disabledReset'>确 定</el-button>
			<el-button @click="$emit('closeDialog')">取 消</el-button>
			<p>
				想起账号密码？
				<el-link type="success" @click="$emit('changeCom','login')">去登录</el-link>
			</p>
		</div>
	</div>
</template>
<script type="text/javascript">
	import {api} from '@/api/public'
	export default{
		name:"resetPassword",
		data(){
			return{
				countDown:0,
				timer:null,
				nowType:'',
				disabledSendCode:true,
				loading:false,
				isPass:false,
				user:{
					type:'email',
					contact:''
				}
			}
		},
		computed:{
			disabledReset(){
				let {contact,code,password,checkPassword}=this.user;
				return this.disabledSendCode && this.isPass && code && code.length==6 &&password&& password.length>=3 && password.length<=16 &&checkPassword &&checkPassword==password?false:true;
			},
		},
		watch:{
			'user.contact': {
				handler: function(val) {
					if(this.timer) return;
					let {type}=this.user;
					if(val){
						if(type=='email'){
							let reg=/^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
							this.disabledSendCode=reg.test(val)?false:true;
						}
						else this.disabledSendCode=(/^1[3456789]\d{9}$/.test(val)?false:true);
					}
					else this.disabledSendCode=true;
					this.isPass=!this.disabledSendCode;
				}
			},
			'user.type':{
				handler: function(val) {
					this.nowType=val=='email'?'邮箱':'手机号';
				}
			}
		},
		created(){
			console.log(1);
		},
		methods:{
			clearText(){
				this.user.contact='';
				// this.user={};
			},
			async sendCodeBy(){
				if(this.timer) return this.info(`${this.countDown}秒后再点击发送验证码~~~`,'w'); 
				let {type,contact}=this.user;
				if(contact=='') return this.info(`${this.nowType}还没输入，无法发送验证码~~~`,'w');
				else{
					let sendCodeApi="sendCodeBy"+(type=='email'?"Email":"Phone");
					this.loading=true;
					let {count}=await api('post','user','checkInfo',{info:contact,type:type});
					setTimeout(()=>{
						this.loading=false;
					},400);
					if(count>0){
						let data=await api('post','user',sendCodeApi,{contact:contact,type:1});
						this.info(`验证码发送到${this.nowType}成功，请及时查看~~~`);
						this.countDown=60;
						this.timer=setInterval(()=>{
							this.countDown--;
							if(this.countDown==0){
								clearInterval(this.timer);
								this.timer=null;
								this.disabledSendCode=false;
								api('delete','user','deleteCode',{contact:contact});
							}
						},1000);
						this.disabledSendCode=true;
					}
					else this.info(`该${this.nowType}未被使用，请重新填写~~~`,'w');
				}
			},
			async resetPassword(){
				let {password,code,contact,checkPassword,type}=this.user;
				if(!contact || !code || !password || !checkPassword) return this.info('资料还没填写完整','w');
				let {count}=await api('post','user','checkInfo',{info:contact,type:type});
				if(count==0) return this.info(`该${str}未被使用，请重新填写`,'w');
				let {success,msg}=await api('post','user','checkCode',{contact:contact,code:code});
				if(!success) return this.info('验证码错误，请重新输入~~~','w');
				if(password.length<3 || password.length>16) return this.info('密码长度3-16位字符之间','w');
				if(password!=checkPassword) return this.info('两次输入的密码不一致~~~','w');
				let {success:s}=await api('put','user','resetPassword',{contact:contact,password:password,type:type});
				if(!s) return  this.info('密码重置失败~~~','e');
				this.info('密码重置成功~~~');
				await api('delete','user','deleteCode',{contact:contact});
				clearInterval(this.timer);
				this.timer=this.countDown=null;
				this.$emit('changeCom','login');
			}
		}
	}
</script>
<style scoped lang='stylus'>
	.login{
		>>>.el-form-item__content{
			>.el-input,.codeBox,.el-select{
				width:77%;
			}
			>span{
				font-size:16px;
				margin-right:.5em;
			}
		}
	}
	.resetPassword{
		.codeBox{
			position: relative;
			display:inline-block;
		}
	}
</style>